<script setup lang="ts">
import SelectList from './SelectList.vue';
import { ref, onBeforeMount, watch } from 'vue';
import { useRoute } from 'vue-router';
import { $InquireById } from '@/api/health';
const route = useRoute();

var healthDetail = ref({});

// 挂载前调用
onBeforeMount(() => {
    $InquireById({
        id: route.query.id
    }).then(res => {
        healthDetail.value = res.data
    })
})

// 监听路由id变化
watch(() => route.query.id, () => {
    $InquireById({
        id: route.query.id
    }).then(res => {
        healthDetail.value = res.data
    })
})
</script>

<template>
    <div class="health-detail">
        <img class="health-detail-img" src="@/images/drug/drug-introduce-bg.jpg" alt="">
        <nav-content navData="&nbsp;&nbsp;>&nbsp;&nbsp;健康管理&nbsp;&nbsp;>&nbsp;&nbsp;详情页面"></nav-content>
        <div class="health-box">
            <div class="health-box-body">
                <div class="health-box-body-title">
                    {{ healthDetail.title }}
                </div>
                <div class="health-box-body-text">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ healthDetail.text }}
                </div>
                <div class="health-box-body-img">
                    <img :src="healthDetail.url" alt="">
                </div>
            </div>
            <SelectList></SelectList>
        </div>
    </div>
</template>

<style scoped lang="scss">
.health-detail {

    .health-detail-img {
        display: flex;
        width: 100vw;
        height: 50vh;

    }

    .health-box {
        display: flex;
        width: 80vw;
        margin: 0 auto;

        .health-box-body {
            flex: 7;
            background: #f7f7f7;
            box-shadow: 0.2vw 0.2vw 0.2vw #ccc;

            .health-box-body-title {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.3vw;
                font-weight: 800;
                margin: 3vh 0;
            }

            .health-box-body-img {
                width: 40vw;
                margin: 0 auto;

                img {
                    width: 100%;
                }
            }

            .health-box-body-text {
                font-size: 1vw;
                margin: 3vh 3vw;
                line-height: 2em;
            }
        }
    }
}
</style>